<template>
  <div>
    <!-- 提示与添加 -->
    <div class="hintAtBtn">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit" class="addBtn" @click="$router.push('/questions/new')">新增试题</el-button>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 第一行 -->
      <el-row :gutter="20" style="margin-bottom:0">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" :clearable="true" placeholder="请选择" @clear="clearSimple" @change="subjectID">
              <el-option v-for="item in simple" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" :clearable="true" :placeholder="optionTable">
              <el-option v-for="item in simpleChildren" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="form.tages" :clearable="true" :placeholder="optionTable">
              <el-option v-for="item in simpleLabel" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="根据题干搜索" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20" style="margin-bottom:0">
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" :clearable="true" placeholder="请选择">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" :clearable="true" placeholder="请选择">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="form.direction" :clearable="true" placeholder="请选择">
              <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="form.region" :clearable="true" placeholder="请选择">
              <el-option label="超级管理员" value="2" />
              <el-option label="录入管理员" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20" style="margin-bottom:0">
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select v-model="form.city" :clearable="true" style="width:48%; float: left; margin-right:2%;" placeholder="请选择" @change="city" @clear="clearCity">
              <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="form.province" :clearable="true" style="width:50%; float: left; " :placeholder="cityTitle">
              <el-option v-for="item in district" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="clear">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/directorys.js'
import { simple as simpleLabel } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js' // 枚举
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'Search',
  props: {
    simple: {
      type: Array,
      required: true
    }

  },
  data() {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tages: '', // 便签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 城市
        province: '' // 城市所在省份
      },
      questionType, // 试题类型枚举渲染到页面用的
      difficulty, // 难度枚举渲染到页面用的
      direction, // 方向枚举
      provinces: provinces(), // 城市
      district: [], // 地区
      simpleChildren: [], // 二级显示内容
      simpleLabel: [], // 标签显示内容
      optionTable: '请选择学科', // 定义一个显示的变量 如果学科被选中就是请选择，反之就是请选择学科
      cityTitle: '请先选择城市' // 定义一个显示的变量 如果城市被选中就是请选择，反之就是请选择城市
    }
  },
  methods: {
    async leadSimpleLabel(id) {
      const res = await simpleLabel({ subjectID: id })
      this.simpleLabel = res.data
      console.log(res)
    }, // 获取标签
    async leadSimple(id) {
      const res = await simple({ subjectID: id })
      this.simpleChildren = res.data
    }, // 获取二级目录
    subjectID(id) {
      this.form.catalogID = ''
      this.form.tages = ''
      this.leadSimple(id)
      this.leadSimpleLabel(id)
      if (id === '') {
        this.optionTable = '请选择学科'
        return
      }
      this.optionTable = '请选择'
    }, // 选择学科后获取便签和二级目录
    city(value) {
      this.form.province = ''
      this.district = citys(value)
      if (value === '') {
        this.optionTable = '请选择学科'
        return
      }
      this.cityTitle = '请选择'
    }, // 选择城市后显示地区
    clearSimple() {
      this.form.catalogID = ''
      this.form.tages = ''
      this.optionTable = '请选择学科'
    }, // 清除下拉框时清空已缓存的内容
    clearCity() {
      this.form.province = ''
      this.form.cityTitle = '请先选择城市'
    }, // 清除下拉框时清空已缓存的内容
    filterFn(obj) {
      const newFrom = {}
      for (const key in obj) {
        if (obj[key] !== '') {
          newFrom[key] = obj[key]
        }
      }
      return newFrom
    }, // 敲黑板  利用过滤筛一下  值为空的不传过去
    submit() {
      const newfrom = this.filterFn(this.form)
      this.$emit('search', newfrom)
    }, // 提交
    clear() {
      this.$confirm('此操作将清除搜索输入框内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form = {
          subjectID: '', // 学科
          catalogID: '', // 二级目录
          tages: '', // 便签
          keyword: '', // 关键字
          questionType: '', // 试题类型
          difficulty: '', // 难度
          direction: '', // 方向
          remarks: '', // 题目备注
          shortName: '', // 企业简称
          city: '', // 城市
          province: '' // 城市所在省份
        }
        const newfrom = this.filterFn(this.form)
        this.$emit('search', newfrom)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清除'
        })
      })
    }

  }
}
</script>

<style scoped lang='scss'>
  .hintAtBtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    span{
      font-size: 12px;
      color: pink;
    }
  }
  .el-select {
    display: block;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;

  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
